window.addEventListener('load', function () {
    //1. 获取元素对象
    var sliderContent = document.querySelector('.slider_content');
    //element.querySelector('ul');
    var ul = sliderContent.querySelector('ul');
    var ol = sliderContent.querySelector('ol');

    //盒子的宽度
    var sliderWidth = sliderContent.clientWidth;
    //当前图片的索引
    var index = 1;
    //判断手指在屏幕中是否挪动
    var flage = false;

    //2.手指触摸 挪动元素对象
    //2.1手指触摸的起始位
    var startX = 0;
    //2.2手指在屏幕上移动的距离
    var moveX = 0;
    //2.3手指开始 触摸
    ul.addEventListener('touchstart', function (e) {
        //5.1 手指触摸停止动画
        clearInterval(timer);

        //获取起始位置
        startX = e.targetTouches[0].pageX;
        flage = false;
    })
    //2.4监听手指移动
    ul.addEventListener('touchmove', function (e) {
        //获取手指在屏幕上的移动距离
        moveX = e.targetTouches[0].pageX - starX;
        var translateX = -index * sliderWidth + moveX;
        ul.style.transform = 'translateX(' + translateX + 'px)';

        flage = true; //手指挪动了
    })
    //监听手指离开屏幕
    ul.addEventListener('touchend', function () {
        if (flage) {
            //当超出 宽度的一半 就跳到下一张图片
            if (Math.abs(moveX) > sliderWidth * 0.5) {
                if (moveX < 0) { //判断挪动的 位置
                    index++; //把左侧的一张图片展示出来
                } else {
                    index--; //把左侧的一张图片展示出来
                }
                //var translateX = -index * sliderWidth;
                //ul.style.transform = 'translateX(' + translateX + 'px)';
            }
            var translateX = -index * sliderWidth;
            ul.style.transition = 'all 0.3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        //5.2 手指离开重新开始动画
        timer = setInterval(function () {
            index++;
            //需要移动的位置
            var translateX = -index * sliderWidth;
            //设置过度动画
            ul.style.transition = 'all 0.3s';
            //设置位置
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }, 2000);

    })
    //4.监听过度动画完成 transitionend 是过度动画完成会触发
    ul.addEventListener('transitionend', function () {
        if (index > 3) {
            index = 1;
        } else if (index <= 0) {
            index = 3;
        }
        //首先停止过度动画
        ul.style.transition = 'none';
        //在转换位置
        var translateX = -index * sliderWidth;
        ul.style.transform = 'translateX(' + translateX + 'px)';

        //动画结束 调整分页按钮
        //找出之前选中的元素 删除样式
        ol.querySelector('.current').classList.remove('current');
        //找出当前选中的元素 设置样式
        ol.children[index - 1].classList.add('current');
    })

    //5. 设置 自动滚动
    var timer = setInterval(function () {
        index++;
        //需要移动的位置
        var translateX = -index * sliderWidth;
        //设置过度动画
        ul.style.transition = 'all 0.3s';
        //设置位置
        ul.style.transform = 'translateX(' + translateX + 'px)';
    }, 2000);
})